<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Steps</title>
    <style>
      .steps-list {
        display: flex;
        gap: 1rem;
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .steps-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      .steps-trigger {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
      }
      .steps-indicator {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e0e0e0;
        font-weight: bold;
      }
      .steps-item[data-current="true"] .steps-indicator {
        background: #007bff;
        color: white;
      }
      .steps-item[data-completed="true"] .steps-indicator {
        background: #28a745;
        color: white;
      }
      .steps-separator {
        width: 2rem;
        height: 2px;
        background: #e0e0e0;
      }
      .steps-item[data-completed="true"] .steps-separator {
        background: #28a745;
      }
      .steps-content {
        margin-top: 2rem;
        padding: 1rem;
        border: 1px solid #e0e0e0;
        border-radius: 0.5rem;
      }
      .steps-controls {
        margin-top: 1rem;
        display: flex;
        gap: 0.5rem;
      }
      .steps-progress {
        margin-top: 1rem;
        height: 4px;
        background: #e0e0e0;
        border-radius: 2px;
        overflow: hidden;
      }
    </style>
  </head>
  <body style="padding: 40px">
    <a href="/">← Back to examples</a>
    <h1>Steps</h1>

    <main class="steps">
      <div class="steps-root">
        <ol class="steps-list">
          <li class="steps-item">
            <button class="steps-trigger">
              <div class="steps-indicator">1</div>
              <span>Account</span>
            </button>
            <div class="steps-separator"></div>
          </li>
          <li class="steps-item">
            <button class="steps-trigger">
              <div class="steps-indicator">2</div>
              <span>Profile</span>
            </button>
            <div class="steps-separator"></div>
          </li>
          <li class="steps-item">
            <button class="steps-trigger">
              <div class="steps-indicator">3</div>
              <span>Review</span>
            </button>
            <div class="steps-separator"></div>
          </li>
          <li class="steps-item">
            <button class="steps-trigger">
              <div class="steps-indicator">4</div>
              <span>Complete</span>
            </button>
          </li>
        </ol>

        <div class="steps-progress"></div>

        <div class="steps-content" data-index="0">
          <h3>Step 1: Account Information</h3>
          <p>Enter your account details here.</p>
        </div>

        <div class="steps-content" data-index="1">
          <h3>Step 2: Profile Setup</h3>
          <p>Complete your profile information.</p>
        </div>

        <div class="steps-content" data-index="2">
          <h3>Step 3: Review</h3>
          <p>Review all your information before completing.</p>
        </div>

        <div class="steps-content" data-index="3">
          <h3>Step 4: Complete</h3>
          <p>Finalize your setup.</p>
        </div>

        <div class="steps-content" data-index="4">
          <h3>Steps Complete</h3>
          <p>Thank you for completing all the steps! Your setup is now finished.</p>
        </div>

        <div class="steps-controls">
          <button class="steps-prev-trigger">Previous</button>
          <button class="steps-next-trigger">Next</button>
        </div>
      </div>
    </main>

    <script type="module" src="./steps.ts"></script>
  </body>
</html>
